// 渲染
function apply() {
    $('tbody').html('');
    $.ajax({
        type: 'get',
        url: 'https://liu.zzgoodqc.cn/goodsx/goodslist',
        dataType: 'json',
        success: (a) => {
            a.data.forEach(item => {
                $('tbody').append(`
                <tr>
                   <td>${item.id}</td>
                   <td>${item.goods_name}</td>
                   <td>${item.stock}</td>
                   <td>${item.price}</td>
                   <td>${item.status}</td>
                   <td>${item.sold}</td>
                    <td><img src="${item.img}" width="100px" height="100px"></td>
                    <td><button onclick="xiu(${item.id})">修改</button>
                       <button onclick="del(${item.id})">删除</button>
                       <button onclick="xiang(${item.id})">详情</button>
                         <button onclick="geng(${item.id},${item.status})">更新商品状态</button>
                    </td>
                </tr>
                `)
            });
        },
        error: (e) => {
            console.log(e);
        }
    })
}
apply()
// 添加

// 点击添加按钮
$('.tj').hide()
function ttt() {
    $('.tj').show()
}
function add() {
    $.ajax({
        type: 'post',
        url: 'https://liu.zzgoodqc.cn/goodsx/add',
        dataType: 'json',
        data: {
            goods_name: $('.ming').val(),
            stock: $('.ku').val(),
            price: $('.jia').val(),
            status: $('.zhuang').val(),
            sold: $('.yi').val(),
            img: $('.hu').val()
        },
        success: () => {
            apply()
            $('.tj').css('display', 'none')
        },
        error: (e) => {
            console.log(e);
        }
    })
}


// 删除
function del(id) {
    $.ajax({
        type: 'get',
        url: 'https://liu.zzgoodqc.cn/goodsx/delete?id=' + id,
        dataType: 'json',
        success: () => {
            apply()
        },
        error: (e) => {
            console.log(e);
        }
    })
}
// 修改
// 显示修改
var iid;
function xiu(id) {
    $('.gai').css('display', 'block')
    iid = id
}
// 确认修改
function que() {
    $.ajax({
        type: 'post',//请求方法
        url: 'https://liu.zzgoodqc.cn/goodsx/update?id=' + iid,//路径
        data: {
            id: iid,
            goods_name: $('.gai_ming').val(),
            stock: $('.gai_ku').val(),
            price: $('.gai_jia').val(),
            status: $('.gai_zhuang').val(),
            sold: $('.gai_yi').val(),
            img: $('.gai_hu').val()
        },//请求参数
        dataType: 'json',
        success: () => {
            $('.gai').css('display', 'none')
            apply()
        },//请求成功 
        error: (e) => {
            console.log(e);
        }//请求失败
    })
}
// 搜索
function zhao() {
    $.ajax({
        type: 'post',
        url: 'https://liu.zzgoodqc.cn/goodsx/search?goods_name=' + $('.cha').val(),
        dataType: 'json',
        success: (t) => {
            $('tbody').html('')
            t.data.forEach(item => {
                $('tbody').html(`
            <tr>
        <td>${item.id}</td>
        <td>${item.goods_name}</td>
        <td>${item.stock}</td>
        <td>${item.price}</td>
        <td>${item.status}</td>
        <td>${item.sold}</td>
        <td><img src="${item.img}width="200px" height="200px" "></td>
        <td>
            <button onclick="xiu(${item.id})">修改</button>
            <button onclick="shan(${item.id})">删除</button>
            <button onclick="xiang(${item.id})">详情</button>
             <button onclick="geng(${item.id},${item.status})">更新商品状态</button>
        </td>
    </tr>
            `)
            })

        },
        error: (b) => {
            console.log(b);
        }
    })
}
// 排序

function pai() {
    var a = $('.sort_ming').val()
    var b = $('.sort_shunxu').val()

    $.ajax({
        type: 'get',
        url: `https://liu.zzgoodqc.cn/goodsx/sort?sort=${b}&type=${a}&page=1&limit=3`,
        dataType: 'json',
        success: (a) => {
            $('tbody').html('')
            a.data.forEach(item => {
                $('tbody').append(`
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.goods_name}</td>
                        <td>${item.stock}</td>
                        <td>${item.price}</td>
                        <td>${item.status}</td>
                        <td>${item.sold}</td>
                        <td><img src="${item.img}" width="100" height="100"></td>
                        <td>
                            <button onclick="xiu(${item.id})">修改</button>
                            <button onclick="del(${item.id})">删除</button>
                            <button onclick="xiang(${item.id})">详情</button>
                             <button onclick="geng(${item.id},${item.status})" class='ggg' >更新商品状态</button>
                        </td>
                    </tr>
                    `
                )
            })
        },
        error: (e) => {
            console.log(e);
        }
    });
}

// 详情
function xiang(id) {
    location.assign('./商品详情页.html?id=' + id)
}

// 分页 
// 获取分页数据
$.ajax({
    type: 'get',
    url: `https://liu.zzgoodqc.cn/goodsx/goodslist`,
    dataType: 'json',
    success: (a) => {
        var num = Math.ceil(a.data.length / 3)
        for (var i = 1; i <= num; i++) {
            $('.fy').append(`
                <button onclick="page(${i})">${i}</button>
                `)
        }
    },
    error: (e) => {
        console.log(e);

    }
})
// 初始化第一页
$.ajax({
    type: 'get',
    url: `https://liu.zzgoodqc.cn/goodsx/listByPage?page=1&limit=3`,
    dataType: 'json',
    success: (a) => {
        a.data.forEach(item => {
            $('tbody').append(`
                <tr>
                   <td>${item.id}</td>
                   <td>${item.goods_name}</td>
                   <td>${item.stock}</td>
                   <td>${item.price}</td>
                   <td>${item.status}</td>
                   <td>${item.sold}</td>
                    <td><img src="${item.img}" width="100px" height="100px"></td>
                    <td><button onclick="xiu(${item.id})">修改</button>
                       <button onclick="del(${item.id})">删除</button>
                       <button onclick="xiang(${item.id})">详情</button>
                    </td>
                </tr>
                `)
        })
    },
    error: (e) => {
        console.log(e);
    }
})
function page(i) {
    $('tbody').html('')
    $.ajax({
        type: 'get',
        url: `https://liu.zzgoodqc.cn/goodsx/listByPage?page=${i}&limit=3`,
        dataType: 'json',
        success: (a) => {
            a.data.forEach(item => {
                $('tbody').append(`
                            <tr>
                               <td>${item.id}</td>
                               <td>${item.goods_name}</td>
                               <td>${item.stock}</td>
                               <td>${item.price}</td>
                               <td>${item.status}</td>
                               <td>${item.sold}</td>
                                <td><img src="${item.img}" width="100px" height="100px"></td>
                                <td><button onclick="xiu(${item.id})">修改</button>
                                   <button onclick="del(${item.id})">删除</button>
                                   <button onclick="xiang(${item.id})">详情</button>
                                </td>
                            </tr>
                            `)
            })
        },
        error: (e) => {
            console.log(e);
        }
    })
}

// 更新商品状态
function geng(id, pl) {
    if (pl == 1 && '上架') {
        pl = 2
    } else if (pl == 2 && '下架') {
        pl = 1
    }
    $.ajax({
        type: 'get',
        url: `https://liu.zzgoodqc.cn/goodsx/updateStatus?id=${id}&status=${pl}`,
        dataType: 'json',
        success: () => {
            apply()
        },
        error: (e) => {
            console.log(e);

        }
    })
}
// 返回首页
var shou = document.querySelector('.shou')
console.log(shou);
function sss() {
    location.assign('./首页.html')


}
